<template>
  <div class="order-detail-page">
    <Header />
    <div class="container" v-if="order.id">
      <div class="order-status-card card">
        <div class="status-header">
          <span class="status-text">订单状态：</span>
          <span class="status-value">{{ order.order_status_desc }}</span>
        </div>
        <div class="status-info">
          <p>订单号：{{ order.order_no }}</p>
          <p>下单时间：{{ order.create_time }}</p>
        </div>
      </div>

      <div class="shipping-info-card card">
        <h3 class="card-title">收货信息</h3>
        <p>收货人：{{ order.receiver_name }}</p>
        <p>电话：{{ order.receiver_phone_hidden }}</p>
        <p>收货地址：{{ order.pcs + ' ' + proxy.$decryptAES(order.receiver_address) }}</p>
      </div>

      <div class="product-list-card card">
        <h3 class="card-title">商品列表</h3>
        <div class="product-item" v-for="product in order.products" :key="product.id">
          <img :src="proxy.$buildUrl(product.main_image)" alt="商品图片" class="product-image" />
          <div class="product-details">
            <p class="product-name">{{ product.spu_name }}</p>
            <p class="product-specs">{{ product.sku_name }}</p>
            <p class="product-price">¥{{ product.actual_price.toFixed(2) }} x {{ product.quantity }}</p>
          </div>
          <div class="product-total">¥{{ product.total_amount.toFixed(2) }}</div>
        </div>
      </div>

      <div class="payment-summary-card card">
        <h3 class="card-title">费用明细</h3>
        <div class="summary-item">
          <span>商品总价：</span>
          <span>¥{{ order.goods_amount.toFixed(2) }}</span>
        </div>
        <div class="summary-item">
          <span>运费：</span>
          <span>¥{{ order.post_amount.toFixed(2) }}</span>
        </div>
        <div class="summary-item" v-if="order.shop_cost_amount > 0">
          <span>优惠：</span>
          <span>¥{{ order.shop_cost_amount.toFixed(2) }}</span>
        </div>
        <div class="summary-item total-payment">
          <span>实付金额：</span>
          <span class="total-price">¥{{ order.pay_amount.toFixed(2) }}</span>
        </div>
        <div class="summary-item">
          <span>支付方式：</span>
          <span>{{ order.pay_type_desc }}</span>
        </div>
      </div>

      <div class="actions">
        <button class="btn primary-btn" @click="goBack">返回</button>
        <button class="btn secondary-btn" @click="contactService">联系客服</button>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { getCurrentInstance, ref, onMounted } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import Header from '@/components/Header.vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import apiOrder from '@/api/modules/order'

  const route = useRoute()
  const router = useRouter()
  const { proxy } = getCurrentInstance()

  // 传值方式 router.push(`/order-detail/${order.id}`)
  const orderId = route.params.id ? route.params.id : ''

  const order = ref({})

  const loadOrderDetail = () => {
    apiOrder.GetOrdersInfo({ id: orderId }).then(async (res) => {
      const province = proxy.$parseJsonObject(res.data.receiver_province)
      const city = proxy.$parseJsonObject(res.data.receiver_city)
      const town = proxy.$parseJsonObject(res.data.receiver_town)
      order.value = res.data
      if (province && province.name) {
        order.value.pcs = province.name + city.name + town.name
      } else {
        order.value.pcs = ''
      }
      const shipPackage = order.value.logistics.find((item) => item.ship_time && item.ship_time !== '')
      const recvPackage = order.value.logistics.find((item) => item.receive_time && item.receive_time !== '')
      if (shipPackage) {
        order.value.ship_time = shipPackage.ship_time
      }
      if (recvPackage) {
        order.value.receive_time = recvPackage.receive_time
      }
    })
  }

  onMounted(() => {
    loadOrderDetail()
  })

  const goBack = () => {
    router.back()
  }

  const contactService = () => {
    // 实际应用中，这里可以跳转到客服页面或弹出客服聊天窗口
    // 复制小程序路径（如 pages/contact/index），并生成 URL Scheme（在微信开放平台生成）

    // 判断是否在微信内
    const isWeixin = /MicroMessenger/i.test(navigator.userAgent)
    if (isWeixin) {
      // 引导用户跳转小程序客服
      window.location.href = 'weixin://dl/business/?t=pages/user/user'
    } else {
      ElMessage.warning('请在微信内打开')
    }
  }
</script>

<style scoped>
  .order-detail-page {
    padding: 20px 0;
    /* background-color: #f5f5f5; */
    min-height: calc(100vh - 130px); /* 减去Header和Footer的高度 */
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
  }

  .page-title {
    font-size: 28px;
    color: #333;
    text-align: center;
    margin-bottom: 30px;
    font-weight: bold;
    position: relative;
    padding-bottom: 10px;
  }

  .page-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #961d13; /* 品牌色 */
    border-radius: 2px;
  }

  .card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    padding: 25px;
  }

  .card-title {
    font-size: 20px;
    color: #333;
    margin-bottom: 20px;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
  }

  /* Order Status Card */
  .order-status-card .status-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }

  .order-status-card .status-text {
    font-size: 18px;
    color: #666;
    font-weight: 500;
  }

  .order-status-card .status-value {
    font-size: 22px;
    color: #961d13; /* 强调色 */
    font-weight: bold;
  }

  .order-status-card .status-info p {
    font-size: 15px;
    color: #777;
    line-height: 1.8;
  }

  /* Shipping Info Card */
  .shipping-info-card p {
    font-size: 15px;
    color: #555;
    line-height: 1.8;
  }

  /* Product List Card */
  .product-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px dashed #eee;
  }

  .product-item:last-child {
    border-bottom: none;
  }

  .product-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 15px;
    border: 1px solid #f0f0f0;
  }

  .product-details {
    flex-grow: 1;
  }

  .product-name {
    font-size: 16px;
    color: #333;
    font-weight: 500;
    margin-bottom: 5px;
  }

  .product-specs {
    font-size: 13px;
    color: #999;
    margin-bottom: 5px;
  }

  .product-price {
    font-size: 14px;
    color: #666;
  }

  .product-total {
    font-size: 16px;
    color: #333;
    font-weight: 600;
    margin-left: 20px;
    flex-shrink: 0;
  }

  /* Payment Summary Card */
  .summary-item {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: #555;
    padding: 8px 0;
    border-bottom: 1px dashed #f0f0f0;
  }

  .summary-item:last-of-type {
    border-bottom: none;
  }

  .total-payment {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
  }

  .total-price {
    color: #961d13; /* 强调色 */
  }

  /* Actions */
  .actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
  }

  .btn {
    padding: 12px 30px;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
  }

  .primary-btn {
    background-color: #961d13; /* 品牌色 */
    color: #fff;
  }

  .primary-btn:hover {
    background-color: #7a170f;
    box-shadow: 0 4px 12px rgba(150, 29, 19, 0.3);
  }

  .secondary-btn {
    background-color: #52a58a; /* 辅助色 */
    color: #fff;
  }

  .secondary-btn:hover {
    background-color: #459a7e;
    box-shadow: 0 4px 12px rgba(82, 165, 138, 0.3);
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .container {
      padding: 0 15px;
    }

    .page-title {
      font-size: 24px;
      margin-bottom: 25px;
    }

    .card {
      padding: 20px;
      margin-bottom: 15px;
    }

    .card-title {
      font-size: 18px;
      margin-bottom: 15px;
    }

    .order-status-card .status-value {
      font-size: 20px;
    }

    .product-item {
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 12px 0;
    }

    .product-image {
      width: 70px;
      height: 70px;
      margin-right: 10px;
    }

    .product-details {
      flex-basis: calc(100% - 85px); /* Adjust based on image width + margin */
      margin-bottom: 10px;
    }

    .product-total {
      width: 100%;
      text-align: right;
      margin-left: 0;
      margin-top: 5px;
    }

    .btn {
      padding: 10px 25px;
      font-size: 15px;
    }

    .actions {
      flex-direction: column;
      gap: 15px;
      margin-top: 25px;
    }
  }

  @media (max-width: 480px) {
    .page-title {
      font-size: 22px;
      margin-bottom: 20px;
    }

    .card {
      padding: 15px;
    }

    .card-title {
      font-size: 16px;
      margin-bottom: 12px;
    }

    .order-status-card .status-text {
      font-size: 16px;
    }

    .order-status-card .status-value {
      font-size: 18px;
    }

    .order-status-card .status-info p,
    .shipping-info-card p {
      font-size: 14px;
    }

    .summary-item span {
      font-size: 13px;
    }

    .product-image {
      width: 50px;
      height: 50px;
      margin-right: 8px;
    }

    .product-details {
      flex-basis: calc(100% - 60px);
    }

    .product-name {
      font-size: 15px;
    }

    .product-specs {
      font-size: 12px;
    }

    .product-price,
    .product-total {
      font-size: 14px;
    }

    .total-payment {
      font-size: 16px;
    }

    .btn {
      width: 100%;
      max-width: 250px;
    }
  }
</style>
